<template>
  <div>
    <!-- 
      v-for 数据循环指令
      语法:
      与forEach的使用方式进行联合记忆，它的每次循环得到的数据和索引的用法与forEach完全一样
      1. v-for="(value, index) in 目标数据结构"
      2. v-for="value in 目标数据结构"

      在v-for循环体中，必须为每一个循环标签加上一个key属性来表示当前标签的唯一性

      forEach((value, index) => {})
      forEach(value => {})
    -->
    <!-- 1. 循环简单数组 √-->
    <div>
      <p v-for="(value, index) in arr" :key="index">
        {{ value }} ------ {{ index }}
      </p>
    </div>

    <!-- 2. 循环复杂数组 => 数组对象 √-->
    <div>
      <p v-for="value in arr2" :key="value.id">
      {{ value.name }} ----- {{ value.age }}
    </p>
    </div>

    <!-- 3. 循环对象 => 循环的就是对象的属性名和属性值 √
      参数1： 属性值
      参数2： 属性名
    -->
    <div>
      <p v-for="(value, key) in obj" :key="key">
        {{ value }} ------ {{ key }}
      </p>
    </div>

    <!-- 4. 循环数字
      参数1： 从1开始计数到最后的自然数
      参数2： 下标索引从0开始计数
    -->
    <div>
      <p v-for="(value, index) in 10" :key="index">
        {{ value }} ------ {{ index }}
      </p>
    </div>

    <!-- 5. 循环字符串
      参数1：字符串的每一个字符
      参数2: 字符所在的下标索引，从0开始计数
    -->
    <div>
      <p v-for="(value, index) in 'abcdefg'" :key="index">
        {{ value }} ------ {{ index }}
      </p>
    </div>

    <div>
      <!-- 
        v-for 会比 v-if 有更高的优先级，那么数据渲染出来以后才会进行v-if判断，一增一删毫无意义，所以不希望在同一个标签中使用v-if
        解决方案： 直接把v-if中的逻辑判断放到filter的函数执行体中即可
      -->
      <!-- <p v-for="(value, index) in arr3" :key="index" v-if="value >= 3">
        {{ value }} ------ {{ index }}
      </p> -->
      <p v-for="(value, index) in arr3.filter(value => value >= 3)" :key="index">
        {{ value }} ------ {{ index }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DemoIndex10',
  data () {
    return {
      arr: ['a', 'b', 'c', 'd'],
      arr2: [
        { name: 'cxk', age: 24.5, id: 1 },
        { name: 'lbw', age: 30, id: 2 }
      ],
      arr3: [1, 2, 3, 4, 5, 6],
      obj: {
        name: 'cxk',
        age: 24.5,
        sex: '不详'
      }
    }
  }
}
</script>

<style>

</style>